<template>
  <a-modal
    title="花名册"
    width="60%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
       <s-table
        ref="rostertable"
        :columns="columns"
        :data="loadData"
        :alert="options.alert"
        :rowKey="(record) => record.id"
        :rowSelection="options.rowSelection"
      >
        <template slot="operator" v-if="hasPerm('sysclasses:add')">
          <x-down
            style="display:none"
            v-if="hasPerm('sysclasses:export')"
            ref="batchExport"
            @batchExport="batchExport"
          />
        </template>
      </s-table>

    </a-spin>
  </a-modal>
</template>

<script>
import { STable, XCard, XDown } from '@/components'
  import { getRoster } from '@/api/modular/garden/classManage'
  import moment from 'moment';
  export default {
    components: {
    XDown,
    XCard,
    STable,
    },
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 }
        },
        selectedRowKeys: [],
        selectedRows: [],
        options: {
          alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
          rowSelection: {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.onSelectChange
          }
        },
        columns: [
          {
            title: '幼儿姓名',
            dataIndex: 'name'
          },
          {
            title: '学号',
            dataIndex: 'studentNumber'
          },
          {
            title: '出生日期',
            dataIndex: 'birthday'
          },
          {
            title: '所在班级',
            dataIndex: 'className'
          },
          {
            title: '登记日期',
            dataIndex: 'registeredDay'
          }
        ],
        classId: '',
        isArchived:undefined,
        visible: false,
        confirmLoading: false,
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          return getRoster(Object.assign(parameter, {ClassId: this.classId,isArchived:this.isArchived})).then((res) => {
            return res.data
          })
        },
      }
    },
    methods: {
      // 初始化方法
      show (record,isArchived) {
        this.classId = record.id;
        this.isArchived = isArchived;
        this.visible = true;
        this.$nextTick(() => {
            this.$refs.rostertable.refresh(true)
        })
      },
      handleSubmit () {
                this.visible = false;
      },
      handleCancel () {
        this.visible = false
      },
      batchExport(){

      },
    }
  }
</script>
